import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class DecoratedBoxWidget extends StatefulWidget {
  const DecoratedBoxWidget({required Key key});

  @override
  _DecoratedBoxWidgetState createState() => new _DecoratedBoxWidgetState();
}

class _DecoratedBoxWidgetState extends State<DecoratedBoxWidget> {
  @override
  void initState() {
    super.initState();
    //初始化状态
    print("initState");
  }

  // 头像
  dynamic avatar = Image.network(
    "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
    width: 100.0,
    color: Colors.blue,
    colorBlendMode: BlendMode.difference,
  );

  Widget wContainer(BoxFit boxFit) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.red,
      child: FittedBox(
        fit: boxFit,
        // 子容器超过父容器大小
        child: Container(width: 60, height: 70, color: Colors.blue),
      ),
    );
  }

  // 直接使用Row
  Widget wRow(String text) {
    Widget child = Text(text);
    child = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [child, child, child],
    );
    return child;
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(children: <Widget>[
          DecoratedBox(
              position: DecorationPosition.background,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Colors.red, Colors.orange.shade700]), //背景渐变
                  borderRadius: BorderRadius.circular(3.0), //3像素圆角,矩形独有
                  boxShadow: [
                    //阴影
                    BoxShadow(
                        color: Colors.black54,
                        offset: Offset(2.0, 2.0),
                        blurRadius: 4.0)
                  ]),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                child: Text(
                  "Login",
                  style: TextStyle(color: Colors.white),
                ),
              )),
          Padding(
              padding: EdgeInsets.all(16.0),
              child: Container(
                color: Color(0xFF1A1A1A),
                margin: EdgeInsets.all(10),
                child: Transform(
                  alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                  transform: Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    color: Colors.deepOrange,
                    child: const Text('Apartment for rent!'),
                  ),
                ),
              )),
          Container(
            margin: EdgeInsets.only(top: 50.0, left: 120.0, bottom: 200),
            constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
            //卡片大小
            decoration: BoxDecoration(
              //背景装饰
              gradient: RadialGradient(
                //背景径向渐变
                colors: [Colors.red, Colors.orange],
                center: Alignment.topLeft,
                radius: .98,
              ),
              boxShadow: [
                //卡片阴影
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(2.0, 2.0),
                  blurRadius: 4.0,
                )
              ],
            ),
            transform: Matrix4.rotationZ(.2),
            //卡片倾斜变换
            alignment: Alignment.center,
            //卡片内文字居中
            child: Text(
              //卡片文字
              "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
            ),
          ),
          avatar, //不剪裁
          ClipOval(child: avatar), //剪裁为圆形
          ClipRRect(
            //剪裁为圆角矩形
            borderRadius: BorderRadius.circular(5.0),
            child: avatar,
          ),
          DecoratedBox(
            decoration: BoxDecoration(
                color: Colors.red
            ),
            child: ClipRect(
                clipper: MyClipper(), //使用自定义的clipper
                child: avatar
            ),
          ),

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.topLeft,
                widthFactor: .5, //宽度设为原来宽度一半，另一半会溢出
                child: avatar,
              ),
              Text(
                "你好世界",
                style: TextStyle(color: Colors.green),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("你好世界", style: TextStyle(color: Colors.green)),
              ClipRect(
                //将溢出部分剪裁
                child: Align(
                  alignment: Alignment.topLeft,
                  widthFactor: .5, //宽度设为原来宽度一半
                  child: avatar,
                ),
              ),
            ],
          ),
          wContainer(BoxFit.none),
          Text('Flutter中国'),
          wContainer(BoxFit.contain),
          Text('Flutter中国'),
          ClipRect(
            child: Container(
              width: 50,
              height: 50,
              color: Colors.red,
              child: FittedBox(
                fit: BoxFit.none,
                child: Container(width: 600, height: 700, color: Colors.blue),
              ),
            ),
          ),
          Column(
            children: [
              wRow(' 9000000000000000090000000000000001 '),
              FittedBox(child: wRow(' 9000000000000000090000000000000001 ')),
              wRow(' 800 '),
              FittedBox(child: wRow(' 800 ')),
            ]
                .map((e) => Padding(
                      padding: EdgeInsets.symmetric(vertical: 20),
                      child: e,
                    ))
                .toList(),
          ),
          //布局均分
          Column(
            children: [
              wRow(' 9000000000000000090000000000000001 '),
              SingleLineFittedBox(
                  child: wRow(' 9000000000000000090000000000000001 ')),
              wRow(' 800 '),
              SingleLineFittedBox(child: wRow(' 800 ')),
            ]
                .map((e) => Padding(
                      padding: EdgeInsets.symmetric(vertical: 20),
                      child: e,
                    ))
                .toList(),
          ),
        ]),
      ),
    );
  }

  @override
  void didUpdateWidget(covariant DecoratedBoxWidget oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void deactivate() {
    super.deactivate();
    print("deactive");
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }

  @override
  void reassemble() {
    super.reassemble();
    print("reassemble");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }
}

class SingleLineFittedBox extends StatelessWidget {
  const SingleLineFittedBox({Key? key, this.child}) : super(key: key);
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (_, constraints) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: UnconstrainedBox(

            child: child,
          ),
        );
      },
    );
  }
}


class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTWH(10.0, 10.0, 60.0, 50.0);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}